<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card" shadow="never">
        <!-- 卡片 -->
        <el-row>
          <el-col :span="22">
            <div class="grid-content bg-purple">
              <el-form label-width="80px">
                <el-form-item label="学科名称">
                  <el-input
                    v-model="content"
                    size="small"
                    style="width: 200px"
                  />

                  <el-button
                    size="small"
                    class="left"
                    @click="del"
                  >清除</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    @click="search"
                  >搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>

          <el-col :span="2">
            <div class="grid-content bg-purple-light">
              <el-button
                size="small"
                icon="el-icon-edit"
                type="success"
                @click="addFn"
              >
                新增学科
              </el-button>
            </div>
          </el-col>
        </el-row>

        <!-- 提示 -->
        <el-alert :title="subTotal" type="info" :closable="false" show-icon />

        <!-- 表格 -->
        <el-table class="table" :data="subjectList" style="width: 100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="subjectName" label="学科名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template v-slot="scope">

              {{ scope.row.addDate | formatTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
          >
            <template v-slot="scope">
              <span v-html="scope.row.isFrontDisplay === 1 ? '是' : '否'" />
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
          />
          <el-table-column prop="tags" label="标签" />
          <el-table-column prop="totals" label="题目数量" />

          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <!-- {{scope.row.id}} -->
              <!-- {{scope.row}} -->
              <el-button
                type="text"
                size="small"
                @click="$router.push('/subjects/directorys?id=' + scope.row.id + '&name=' + scope.row.subjectName)"
              >学科分类</el-button>
              <!-- <el-button type="text" size="small">学科分类</el-button> -->
              <el-button
                type="text"
                size="small"
                @click="$router.push('/subjects/tags?id=' + scope.row.id + '&name=' + scope.row.subjectName)"
              >学科标签</el-button>
              <el-button type="text" size="small" @click="editFn(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="delSubject(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          :current-page="query.page"
          :page-size="query.pagesize"
          background
          layout="prev, pager, next, sizes,  jumper"
          :page-sizes="[10, 15, 20, 25]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

        <!-- 弹框 -->
        <el-dialog
          :title="isEdmit ? '修改学科' : '新增学科'"
          :visible.sync="dialogVisible"
          width="27%"
          @close="restForm"
        >
          <el-form
            ref="userForm"
            :rules="rules"
            :model="form"
            label-width="80px"
          >
            <el-form-item prop="subjectName" label="学科名称">
              <el-input
                v-model="form.subjectName"
                size="small"
                style="width: 100%"
              />
            </el-form-item>

            <el-form-item label="是否显示">
              <el-switch
                v-model="form.isFrontDisplay"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
              />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, detail, remove, update } from '../../api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  name: 'Subjects',

  filters: {
    formatTime(value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    }
  },

  data() {
    return {
      total: 0, // 分页 数据总条数
      subTotal: '', // 提示
      query: {
        page: 1, // 页码
        pagesize: 10, // 每页显示的条数
        subjectName: '' // 学科名称
      },
      subjectList: [], // 学科列表
      content: '', // 学科名称
      dialogVisible: false, // 弹框显示
      isEdmit: false, // 是否是修改
      // isFrontDisplay: 1, // 前台是否显示
      form: {
        id: 0, // 学科id
        isFrontDisplay: 1, // 前台是否提示
        subjectName: '' // 学科名称
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
      // isId: '' // id
    }
  },

  created() {
    this.getList()
  },

  methods: {
    // 删除学科
    async delSubject(id) {
      // remove(id)
      const confirmRes = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmRes === 'cancel') return this.$message('您取消了删除')

      // 调接口
      const res = await remove(id)
      console.log(res)

      if (this.subjectList.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }

      this.$message.success('删除成功')

      this.getList()
    },
    // 点击编辑按钮
    async editFn(data) {
      this.form.id = data.id
      // 是否为修改
      this.isEdmit = true
      this.dialogVisible = true
      const res = await detail(this.form)
      // console.log(data)
      console.log(res)
      this.form.subjectName = res.data.subjectName
      this.form.isFrontDisplay = res.data.isFrontDisplay
      console.log(this.form.isFrontDisplay)
    },
    // 修改学科方法
    async editSubject() {
      // this.query.subjectName = res.data.subjectName
      // 修改api
      await update(this.form)
      this.$message.success('学科修改成功')
      // 关闭弹窗
      this.dialogVisible = false
    },

    // 重置数据 验证规则
    restForm() {
      this.form = {
        isFrontDisplay: 1,
        subjectName: ''
      }

      this.$refs.userForm.resetFields()
    },

    // 点击确定 新增学科/修改学科
    submit() {
      this.$refs.userForm.validate(async(valid) => {
        if (!valid) return
        this.isEdmit ? this.editSubject() : this.addSubject()
        this.getList()
      })
    },
    // 新增学科
    addFn() {
      // 弹框打开
      this.dialogVisible = true
      // 是否是修改
      this.isEdmit = false
    },
    // 新增学科方法
    async addSubject() {
      await add(this.form)
      // console.log(res)
      this.$message.success('新增学科成功')
      // 关闭弹窗
      this.dialogVisible = false
    },

    // 搜索/筛选
    search() {
      // console.log(this.subjectName)
      this.query.subjectName = this.content
      this.getList()
    },

    // 清除按钮
    del() {
      this.content = ''
    },

    // 获取列表
    async getList() {
      const res = await list(this.query)
      // console.log(res)
      this.subjectList = res.data.items
      // console.log(this.subjectList)
      this.total = res.data.counts
      this.subTotal = `数据一共 ${this.total} 条`
      this.subjectName = res.data.items.subjectName
    },

    // 当每页显示的条数发生改变时触发
    handleSizeChange(newSize) {
      console.log(newSize)
      this.query.pagesize = newSize
      // 重新渲染数据页面
      this.getList()
    },

    // 当前页面发生改变时触发
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.query.page = newPage
      this.getList()
    }
  }
}
</script>

<style scoped>
.bg-purple-light {
  /* padding-right: 30px; */
  text-align: right;
}

.left {
  margin-left: 10px;
}

.el-card .el-card__header {
  border-bottom: 0;
}

.app-container {
  padding: 0;
}

.table {
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-pagination {
  /* text-align: center; */
  display: flex;
  justify-content: right;
}
</style>
